<script setup>
import { ref } from 'vue';
import { List, Cell, Button, showDialog } from 'vant';
import { getTaskInstancePage, getTaskLog, getTaskLogTail } from '@/api/dolphin';
import { useRoute } from 'vue-router';


const route = useRoute();
const loading = ref(false);
const finished = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
const totalItems = ref(0);
const items = ref([]);
const value = ref('');
const clusterId = ref(route.params.clusterId || 'default-cluster-id');
const projectCode = ref(Number(route.params.projectCode) || 12345);

const onLoad = async () => {
  try {
    loading.value = true;
    const response = await getTaskInstancePage(
      clusterId.value, // 替换为实际的集群ID
      projectCode.value, // 替换为实际的项目代码
      currentPage.value,
      pageSize.value,
      undefined, // processInstanceId 可选参数
      value.value // 过滤条件
    );
    items.value.push(...response.records);
    totalItems.value = response.totalCount;

    if (items.value.length >= totalItems.value) {
      finished.value = true;
    }
  } catch (error) {
    console.error('加载任务实例失败:', error);
  } finally {
    loading.value = false;
  }
};

const showTaskLog = async (taskInstanceId) => {
  try {
    const logResponse = await getTaskLog(
      clusterId.value,
      projectCode.value,
      taskInstanceId
    );
    showDialog({
      title: '任务日志',
      message: logResponse.logContent,
      confirmButtonText: '确定'
    });
  } catch (error) {
    console.error('获取任务日志失败:', error);
  }
};

const viewTaskLogTail = async (taskInstanceId) => {
  try {
    const log = await getTaskLogTail(
      clusterId.value,
      projectCode.value,
      taskInstanceId,
      20  // 获取最后20行
    );
    showDialog({
      title: '任务日志',
      message: log || '暂无日志',
      confirmButtonText: '确定',
      className: 'task-log-dialog',
      messageAlign: 'left'
    });
  } catch (error) {
    console.error('获取日志失败:', error);
  }
};

const onSearch = () => {
  currentPage.value = 1;
  items.value = [];
  finished.value = false;
  onLoad();
};
</script>

<template>
  <div>
    <van-search v-model="value" placeholder="任务名称" @search="onSearch"/>
    <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
      <van-cell v-for="(item, index) in items" :key="index" :title="item.name" is-link @click="showTaskLog(item.id)">
        <template #right-icon>
          <van-button round type="success" size="small" icon="passed" name="task-status"></van-button>
          <van-button 
            round 
            type="primary" 
            size="small" 
            icon="description-o"
            name="view-task-log"
            title="查看任务日志"
            @click.stop="viewTaskLogTail(item.id)"
          ></van-button>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<style scoped>
:deep(.task-log-dialog) {
  .van-dialog__message {
    white-space: pre-wrap;
    font-family: monospace;
    max-height: 60vh;
    overflow-y: auto;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
  }
}
</style>
